import React, { useEffect, useState } from "react";
import { Button, Drawer, Form, Input, Select } from "antd";
import { $add, $getOne, $update } from "../../apis/adminApi";
import { $list } from "../../apis/roleListApi";

export default function AddAdmin({
  open,
  setOpen,
  loadList,
  loginId,
  setLoginId,
  setAdminList,
}) {
  let [form] = Form.useForm();
  const [roleList, setRoleList] = useState([]);
  useEffect(() => {
    if (loginId !== 0) {
      $getOne(loginId).then((r) => {
        form.setFieldsValue({
          role: r[0].role,
          phone: r[0].phone,
          photo: r[0].photo,
          name: r[0].name,
          loginId: r[0].loginId,
          loginPwd: r[0].loginPwd,
          key: r[0].id,
        });
      });
    }
    loadAdminList();
  }, [loginId]);
  const [roleID, setRoleID] = useState([]);

  //提交表单
  const onFinish = (values) => {
    $list().then((data) => {
      let arr = [];
      data.map((obj) => {
        arr.push(Object.values(obj)[1]);
      });
      setRoleID(arr);
    });

    if (loginId) {
      $update(values).then(() => {
        loadList();
      });
    } else {
      const index = values["role"] - 1;
      //bug,角色数据更新后，添加角色第一次获取不到role
      values = { ...values, role: roleID[index] };

      $add(values).then((data) => {
        data = data.map((i) => {
          return {
            ...i,
            key: i.id,
          };
        });
        setAdminList(data);
        loadList();
        clear();
        alert("添加成功");
        onClose();
      });
    }
  };

  // 加载角色数据
  const loadAdminList = () => {
    $list().then((data) => {
      data = data.map((i) => {
        return {
          value: i.key,
          label: i.name,
        };
      });
      setRoleList(data);
    });
  };
  const clear = () => {
    form.resetFields();
  };
  const onClose = () => {
    clear();
    setLoginId(0);
    setOpen(false);
  };

  return (
    <Drawer
      title={loginId > 0 ? "修改账户" : "添加账户"}
      placement="right"
      onClose={onClose}
      open={open}
    >
      <Form
        form={form}
        name="basic"
        labelCol={{
          span: 4,
        }}
        wrapperCol={{
          span: 20,
        }}
        style={{
          maxWidth: 600,
        }}
        onFinish={onFinish}
        autoComplete="off"
      >
        <Form.Item
          label="账号"
          name="loginId"
          rules={[
            {
              required: true,
              message: "请输入账号!",
            },
          ]}
          hidden={loginId}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="密码"
          name="loginPwd"
          rules={[
            {
              required: true,
              message: "请输入密码!",
            },
          ]}
          hidden={loginId}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item
          label="姓名"
          name="name"
          rules={[
            {
              required: true,
              message: "请输入名字!",
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="电话"
          name="phone"
          rules={[
            {
              required: true,
              message: "请输入电话!",
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="照片"
          name="photo"
          rules={[
            {
              required: true,
              message: "请上传照片",
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="角色"
          name="role"
          rules={[
            {
              required: true,
              message: "请选择你的角色!",
            },
          ]}
        >
          <Select
            className="select"
            optionFilterProp="children"
            options={roleList}
          />
        </Form.Item>

        <Form.Item label="keyId" name="key" hidden>
          <Input />
        </Form.Item>

        <Form.Item
          wrapperCol={{
            offset: 4,
            span: 16,
          }}
        >
          <Button type="primary" htmlType="submit">
            {loginId > 0 ? "修改" : "添加"}
          </Button>
          <Button onClick={clear}>取消</Button>
        </Form.Item>
      </Form>
    </Drawer>
  );
}
